<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import '@/assets/css/login.css';
const isRegister = ref(false)
const registerData = ref({
    username:'',
    password:'',
    rePassword:''
});

const checkRePassword = (rule, value, callback)=>{
    if(value === ''){
        callback(new Error('请再次确认密码'));
    }else if(value !== registerData.value.password){
        callback(new Error('请确保两次输入密码一致'));
    }else{
        callback();
    }
};

const rules = {
    username:[
        {required:true, message:'请输入用户名', trigger:'blur'},
        {min:5,max:16, message:'长度为5~16为字符', trigger:'blur'}
    ],
    password:[
        {required:true, message:'请输入密码', trigger:'blur'},
        {min:5,max:16, message:'长度为5~16为字符', trigger:'blur'}
    ],
    rePassword:[
        {validator:checkRePassword, trigger:'blur'}
    ]
}

import {userRegisterService} from '@/api/user.js'
const register = async()=>{
    let result = await userRegisterService(registerData.value);
    // if(result.code === 0){
    //     alert(result.msg ? result.msg:'注册成功！');
    // }else{
    //     alert("注册失败！");
    // }
    // alert(result.msg ? result.msg:'注册成功！');
    ElMessage.success(result.msg ? result.msg:'注册成功');
}

import { userLoginService } from '@/api/user.js';
import {useRouter} from 'vue-router'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
const router = useRouter()
const loginContainer = ref(null)

// 晃动动画触发函数

// 抖动动画函数
const triggerShake = () => {
  const el = loginContainer.value
  if (!el) return
  el.classList.remove('simple-shake')
  void el.offsetWidth // 强制重绘
  el.classList.add('simple-shake')
}

const login = async () => {
  const result = await userLoginService(registerData.value)
  if (result.code === 0) {
    ElMessage.success(result.msg || '登录成功')
    showFireworks()
    tokenStore.setToken(result.data)
    router.push('/')
  } else {
    triggerShake()
    ElMessage.error(result.msg || '密码错误！请重新输入！')
  }
}


const clearRegisterData = ()=>{
    registerData.value={
        username:'',
        password:'',
        rePassword:''
    }
}

import { Fireworks } from 'fireworks-js'

const showFireworks = () => {
  const container = document.createElement('div')
  container.style.position = 'fixed'
  container.style.top = '0'
  container.style.left = '0'
  container.style.width = '100%'
  container.style.height = '100%'
  container.style.zIndex = '9999'
  document.body.appendChild(container)

  const fireworks = new Fireworks(container, {
    autoresize: true,
    opacity: 0.5,
    acceleration: 1.05,
    friction: 0.97,
    gravity: 1.5,
    particles: 80,
    traceLength: 3,
    traceSpeed: 5,
    explosion: 6,
    intensity: 30,
    flickering: 50,
    lineStyle: 'round',
    hue: {
      min: 0,
      max: 360,
    },
  })

  fireworks.start()
  setTimeout(() => {
    fireworks.stop()
    document.body.removeChild(container)
  }, 3000)
}


</script>



<template>
  <div class="login-wrapper">
    <!-- 背景视频 -->
    <video autoplay muted loop class="bg-video">
      <source src="@/assets/bg.mp4" type="video/mp4" />
    </video>

    <!-- 登录/注册卡片容器，绑定 ref -->
    <div class="login-container" ref="loginContainer">
      <!-- 注册表单 -->
      <el-form
        v-if="isRegister"
        ref="form"
        class="fancy-login-form"
        size="large"
        :model="registerData"
        :rules="rules"
        autocomplete="off"
      >
        <el-form-item>
          <h1 class="login-title">注册</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password" />
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input :prefix-icon="Lock" type="password" placeholder="请再次输入密码" v-model="registerData.rePassword" />
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="register">注册</el-button>
        </el-form-item>
        <el-form-item class="center">
          <el-link type="info" :underline="false" @click="isRegister = false;clearRegisterData()">
            <button>返回</button>
          </el-link>
        </el-form-item>
      </el-form>

      <!-- 登录表单 -->
      <el-form
        v-else
        ref="form"
        class="fancy-login-form"
        size="large"
        :model="registerData"
        :rules="rules"
        autocomplete="off"
      >
        <el-form-item>
          <h1 class="login-title">登录</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password" />
        </el-form-item>
        <el-form-item class="flex-between">
          <el-form-item>
            <div class="login-extra-options">
              <el-checkbox class="remember-me">记住我</el-checkbox>
              <span style="display:inline-block; width: 200px;"></span>
              <el-link type="primary" :underline="false" class="forgot-password">忘记密码？</el-link>
            </div>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="login">登录</el-button>
        </el-form-item>
        <el-form-item class="center">
          <el-link type="info" :underline="false" @click="isRegister= true;clearRegisterData()">注册 →</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>






<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
            url('@/assets/login_bg.jpg') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>